<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="32%"
      :title="title + '店员'"
    >
      <el-form
        :model="userInfo"
        :rules="rules"
        ref="supplierForm"
        label-width="0"
      >
        <el-form-item prop="nickName">
          <div style="display: flex">
            <p style="width: 90px; text-align: center; font-weight: bold">
              姓名：
            </p>
            <el-input
              size="small"
              clearable
              v-model="userInfo.nickName"
              placeholder="请输入"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="phone">
          <div style="display: flex">
            <p style="width: 90px; text-align: center; font-weight: bold">
              电话：
            </p>
            <el-input
              size="small"
              clearable
              v-model="userInfo.phone"
              placeholder="请输入"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <p style="width: 100px; text-align: right; font-weight: bold">
              证件：
            </p>
            <div style="width: 100%; display: flex">
              <span
                >身份证正面：
                <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="`${$apiHost}/img/fileImgUrl`"
                  :show-file-list="false"
                  :on-success="handleChangeFont"
                >
                  <img
                    v-if="userInfo.idCardFront"
                    :src="'https://' + userInfo.idCardFront"
                    class="avatar"
                  />
                  <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                  ></i> </el-upload
              ></span>
              <span style="margin-left: 100px"
                >身份证反面：
                <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="`${$apiHost}/img/fileImgUrl`"
                  :show-file-list="false"
                  :on-success="handleChangeBack"
                >
                  <img
                    v-if="userInfo.idCardBack"
                    :src="'https://' + userInfo.idCardBack"
                    class="avatar"
                  />
                  <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                  ></i> </el-upload
              ></span>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="healthCertificateArray">
          <div style="display: flex">
            <p style="width: 73px; text-align: center; font-weight: bold">
              经营许可：
            </p>
            <!-- <rayUpload @url="getImageUrl"></rayUpload> -->
            <Uploader
              @change="imgChange($event, 1)"
              :limit="1"
              :value="userInfo.healthCertificateArray"
            ></Uploader>
          </div>
        </el-form-item>

        <div style="margin-top: 20px; text-align: center">
          <el-button
            @click="dialogVisible = false"
            style="
              background-color: #f3f6fd;
              color: #303e9d;
              width: 100px;
              height: 40px;
              font-weight: bold;
              font-size: 14px;
            "
            size="small"
            >取 消
          </el-button>
          <el-button
            @click="_submit"
            style="
              background-color: #303e9d;
              color: #eeeeee;
              width: 100px;
              height: 40px;
              font-weight: bold;
              font-size: 14px;
            "
            size="small"
            >保 存
          </el-button>
        </div>
      </el-form>
      <!--      <span slot="footer">-->
      <!--        <el-button @click="dialogVisible=false">取 消</el-button>-->
      <!--        <el-button style="background-color:#303e9d;color: #eeeeee" @click="_submit">确 定</el-button>-->
      <!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import Uploader from '@/components/Element/Uploader.vue'
export default {
  name: 'dialogGoods',
  components: { Uploader },
  props: {
    shopId: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    headers() {
      const token = window.$quinn.getStorage('tokenv3')
      return {
        token,
      }
    },
  },
  data() {
    return {
      dialogVisible: false,
      selectDiolTitle: '',
      title: '',
      userName: '',
      phoneNum: '',

      dialogVisibleshopManagerId: false,
      userInfo: {
        // goodsId: null,
        shopId: null,
        nickName: '',
        phone: '',
        idCardFront: '', //	身份证正面
        idCardBack: '', //	身份证反面
        healthCertificate: '', //	健康证
        healthCertificateArray: [],
      },
      brandList: [],
      recordInfo: {},
      recordId: '',
      storeId: '',
      supplierList: [],
      rules: {
        nickName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入有效的手机号码',
            trigger: 'blur',
          },
        ],
        storeArea: [
          { required: true, message: '请输入门店面积', trigger: 'blur' },
        ],
        openTimeArray: [
          { required: true, message: '请选择营业时间', trigger: 'change' },
        ],
        address: [{ required: true, message: '请选择地址', trigger: 'change' }],
        // spec: [{ required: true, message: '请输入规格', trigger: 'blur' }],
        shopImageList: [
          { required: true, message: '请上实拍图', trigger: 'change' },
        ],
        // storeType: [
        //   { required: true, message: '请选择门店类型', trigger: 'change' },
        // ],
        // storePhone: [
        //   { required: true, message: '请输入门店电话', trigger: 'blur' },
        //   {
        //     pattern: /^1[3-9]\d{9}$/,
        //     message: '请输入有效的手机号码',
        //     trigger: 'blur',
        //   },
        // ],
        // franchiseeId: [
        //   { required: true, message: '请选择加盟商', trigger: 'change' },
        // ],
        // brandPartyId: [
        //   { required: true, message: '请选择品牌方', trigger: 'change' },
        // ],
        // storeArea: [
        //   { required: true, message: '请输入门店面积', trigger: 'blur' },
        //   {
        //     validator(rule, value, callback) {
        //       const num = parseFloat(value)
        //       if (!/^\d+(\.\d{1,2})?$/.test(value)) {
        //         return callback(new Error('请输入合法的正数（最多两位小数）'))
        //       }
        //       if (num <= 0) {
        //         return callback(new Error('面积必须大于 0'))
        //       }
        //       callback()
        //     },
        //     trigger: 'blur',
        //   },
        // ],
      },
    }
  },
  mounted() {
    // this.getCategoryList()
  },
  methods: {
    handleChangeFont(res, fileList) {
      this.userInfo.idCardFront = res.result[0]
    },
    handleChangeBack(res, fileList) {
      this.userInfo.idCardBack = res.result[0]
    },
    imgChange(e, type) {
      console.log('上传图片数组', e, type, this.userInfo)

      if (type === 1) {
        //  健康证
        if (!e.length) {
          this.userInfo.healthCertificate = ''
        }
        this.userInfo.healthCertificateArray = e
        this.userInfo.healthCertificate = e[0]
      }
    },
    getImageUrl(e) {
      console.log('上传完毕', e)
    },
    handleOpen(val) {
      console.log('addGoods2', val)
      this.dialogVisible = true
      if (val) {
        this.title = '编辑'
        Object.keys(this.userInfo).forEach((key) => {
          if (val.hasOwnProperty(key)) {
            this.userInfo[key] = val[key]
          }
        })
        if (val.image) {
          this.userInfo.goodsImgArray = [val.image]
          this.userInfo.goodsImg = val.image
        }
        this.userInfo.bakingIdSelect = [val.categoryId, val.bakingId]
        console.log('this.userInfo.', this.userInfo)
      } else {
        this.title = '录入'

        this.userInfo = this.$options.data.call(this).userInfo
        this.$nextTick(() => {
          this.$refs.supplierForm?.clearValidate?.() // 清除校验状态
        })
      }
    },

    async _submit() {
      this.$refs.supplierForm.validate(async (valid) => {
        if (!valid) return false
        try {
          if (!this.userInfo.idCardFront) {
            return this.$message.error('请上传身份证正面照!')
          }
          if (!this.userInfo.idCardBack) {
            return this.$message.error('请上传身份证反面照!')
          }
          if (
            !this.userInfo.healthCertificateArray ||
            !this.userInfo.healthCertificate
          ) {
            return this.$message.error('请上传健康证!')
          }

          this.userInfo.shopId = this.shopId
          console.log('最终', this.userInfo)

          const apiMap = {
            录入: this.$api.userAddStaffUser,
            // 编辑: this.$api.goodsUpdateGoods,
          }
          const apiFunc = apiMap[this.title]
          if (!apiFunc) return
          const resDate = await apiFunc(this.userInfo)
          console.log('结果新增', resDate)
          if (resDate == 1) {
            this.$message.success(`${this.title}成功！`)
            this.dialogVisible = false
            this.$emit('addStatus', 1)
          }
        } catch (err) {
          console.error('接口请求出错：', err)
          //   this.$message.error('操作失败，请稍后重试')
        }
      })
    },
  },
}
</script>
<style scoped>
/deep/.img-item {
  width: 60px !important;
  height: 60px !important;
}
/deep/.el-date-editor--timerange {
  height: 100% !important;
  width: 100% !important;
}
/* /deep/.el-date-editor--timerange.el-input__inner {
  width: 100%;
} */
/deep/.el-range-separator {
  line-height: 23px !important;
}
/deep/.el-date-editor .el-range__icon {
  line-height: 27px !important;
}
/deep/.el-upload--picture-card {
  width: 60px !important;
  height: 60px !important;
}
/deep/.img-wrap .close {
  top: -10px !important;
  font-size: 20px !important;
}
.row-tow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
  /* display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row; */
}

::v-deep .el-input__inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .el-dialog {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/deep/ .el-dialog__header {
  background-color: #303e9d;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /*border-top-left-radius: 20 px;*/
  /*/ / border-top-right-radius: 20 px;*/
}

.over-text {
  width: 120px;
  display: inline-block;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.avatar-uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 100px;
  display: block;
}
</style>
